import styles from './HarvestAddress.module.scss'
import { getCustomerConsigneeList } from '@/api/customer/manage/list'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { ElImage, ElIcon, ElTooltip } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'HarvestAddress',
  setup(props, { emit, slots }) {
    const route = useRoute()
    const state = reactive({
      list: []
    })
    onMounted(async () => {
      const res: any = await getCustomerConsigneeList({ cust_id: route.query.id })
      console.log('收货列表', res)
      state.list = res || []
    })

    const rederTooltip = (item: any) => {
      return (
        <ElTooltip
          effect="light"
          placement="top"
          disabled={true}
          vSlots={{
            default: () => (
              <div class={styles.info}>
                {item.name}（{item.mobile}）
              </div>
            ),
            content: () => `${item.name} ${item.mobile}`
          }}
        />
      )
    }
    // 渲染收货地址
    const renderAddressItem = (item: any) => {
      return (
        <>
          <div class={styles.address}>
            {item.region}
            {item.address}
          </div>
        </>
      )
    }
    return () => (
      <div class={styles.harvest_address}>
        <div class={styles.title}>收货地址</div>
        <el-scrollbar max-height="400px" class={styles.scrollbar}>
          {state.list.length ? (
            state.list.map((item: any, index: number) => (
              <div class={styles.item}>
                <div class={styles.left}>
                  {rederTooltip(item)}
                  {renderAddressItem(item)}
                </div>
              </div>
            ))
          ) : (
            <div class={styles.empty}>暂无数据</div>
          )}
        </el-scrollbar>
      </div>
    )
  }
})
